<template>
  <div>
    <div class="panel-body">
      <div class="row" style="padding: 0 15px;text-align: center;overflow: hidden;position:relative;">
          <div>{{planForm.name}}</div>
          <div>
              <span>{{dict_sport[planForm.sportId]}}</span> &nbsp;&nbsp;&nbsp;&nbsp;
              <span>{{dict_emp[planForm.empId]}}</span>
          </div>
          <div>
              <span style="float: left;">{{orgName}}</span>
              <span style="float: right;">{{$moment(planForm.doubleDate[0]).format('YYYY-MM-DD')=='Invalid date'?'':$moment(planForm.doubleDate[0]).format('YYYY-MM-DD')}}至{{$moment(planForm.doubleDate[0]).format('YYYY-MM-DD')=='Invalid date'?'':$moment(planForm.doubleDate[1]).format('YYYY-MM-DD')}}</span>
          </div>
      </div>

      <table style="font-size: 50%;border-collapse: collapse;width: 100%;table-layout:fixed;" border="1" id="table4TrainExcel" >

          <tr>
              <td width="6%">月份</td>
              <td :width="index==12?'5%':''" colspan="4" v-for="(item,name,index) in resData.month">{{item}}</td>

          </tr>

          <tr>
              <td>一般素质</td>
              <td colspan="4" v-for="(item,name,index) in resData.generalQuality">{{item}}</td>

          </tr>

          <tr>
              <td>专项素质</td>
              <td colspan="4" v-for="(item,name,index) in resData.specialQuality">{{item}}</td>

          </tr>

          <tr>
              <td>技术</td>
              <td colspan="4" v-for="(item,name,index) in resData.technology">{{item}}</td>

          </tr>

          <tr>
              <td>战术</td>
              <td colspan="4" v-for="(item,name,index) in resData.tactics">{{item}}</td>

          </tr>

          <tr>
              <td>理论与其他</td>
              <td colspan="4" v-for="(item,name,index) in resData.longTextOne">{{item}}</td>

          </tr>
          <tr>
              <td>周</td>
              <td style="text-align: center;" v-for="(item,name,index) in resData.week">{{item}}</td>
              <td colspan="4" style="text-align: center;">48</td>
          </tr>
          <tr>
              <td>训练次数</td>
              <td style="text-align: center;" v-for="(item,name,index) in resData.trainingTimes">{{item}}</td>
              <td colspan="4" style="text-align: center;" width="50px" v-text="getTrainingTimesNumSum"></td>
          </tr>
          <tr>
              <td>训练时数</td>
              <td style="text-align: center;transform: scale(0.75);" v-for="(item,name,index) in resData.trainingHours">{{item}}</td>
              <td colspan="4" style="text-align: center;" v-text="getTrainingHoursTimesNumSum"></td>
          </tr>
          <tr>
              <td>负荷量</td>
              <td style="text-align: center;" v-for="(item,name,index) in resData.loadCapacity">{{item}}</td>
              <td colspan="4" style="text-align: center;" v-text="getLoadCapacityNumSum"></td>
          </tr>
          <tr>
              <td>负荷强度</td>
              <td style="text-align: center;" v-for="(item,name,index) in resData.loadStrength">{{item}}</td>
              <td colspan="4" style="text-align: center;" v-text="getLoadStrengthNumSum"></td>
          </tr>
          <tr>
              <td colspan="53" height="160px" style="position: relative;">
                  <span style="display: inline-block;height: 100%;width: 10px;position: absolute;left: 0;top: 0;line-height: 35px">负<br>荷<br>曲<br>线</span>
                  <div style="display: inline-block;width: 100%;height: 100%;box-sizing:border-box;padding-left: 10px;position: absolute;left:0px;top: 0px;" id="clearNothing">
                      <div v-if="!picInfo" id="excelCharts" style="height: 100%;"></div>
                      <img v-else :src="picInfo">
                  </div>
              </td>
          </tr>
          <tr>
              <td>年度任务</td>
              <td class="centerTextareaStyle btmTextAreaStyle" colspan="52">{{resData.AnnualTasks['0']}}</td>
          </tr>
          <tr height="50px">
              <td>基本期</td>
              <td colspan="6">日期</td>
              <td colspan="23">各阶段主要训练内容</td>
              <td colspan="23">各阶段主要训练措施、方法、手段</td>
          </tr>
          <tr style="height: 50px" v-for="(item,name,index) in resData.longText4Arr" v-show="item['0']">
              <td>{{item['0']}}</td>
              <td colspan="6">{{item['1']}}</td>
              <td colspan="23"><div v-html="item['2']"></div></td>
              <td colspan="23"><div v-html="item['3']"></div></td>
          </tr>

      </table>

  </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {orgBaseInfoCurrent} from '@/api/organization.js'
  export default {
    props:['resData','docExcelId','docExcelInfo','planForm','dict_emp','dict_sport'],
    data() {
      return {
        orgName: '',
        personCharts: '',
        picInfo: '',
      }
    },
    created() {
      this.getExcel()
    },
    watch: {
      resData(val){
        this.getExcel()
      },
      planForm(val) {
      },
    },
    computed: {
      getTrainingTimesNumSum: {
          get :function(){
              let getTrainingTimesNumSum = 0;
              let TrainingTimesDivisor = 0
              for (let item in this.resData.trainingTimes) {
                  // console.log(item)
                  if(this.resData.trainingTimes[item] && this.resData.trainingTimes[item] != 0){
                      getTrainingTimesNumSum += Number(this.resData.trainingTimes[item])
                      TrainingTimesDivisor++
                  }
              }
              return parseFloat(getTrainingTimesNumSum).toFixed(1);
          }

      },
      getTrainingHoursTimesNumSum: {
          get :function(){
              let getTrainingHoursNumSum = 0;
              let TrainingHoursDivisor = 0
              for (let item in this.resData.trainingHours) {
                  if(this.resData.trainingHours[item] && this.resData.trainingHours[item] != 0){
                      getTrainingHoursNumSum += Number(this.resData.trainingHours[item])
                      TrainingHoursDivisor++
                  }
              }
              return parseFloat(getTrainingHoursNumSum).toFixed(1);

          }

      },
      getLoadCapacityNumSum: {
          get :function(){
              let getLoadCapacityNumSum = 0;
              let LoadCapacityDivisor = 0
              for (let item in this.resData.loadCapacity) {
                  if(this.resData.loadCapacity[item] && this.resData.loadCapacity[item] != 0){
                      getLoadCapacityNumSum += Number(this.resData.loadCapacity[item])
                      LoadCapacityDivisor++
                  }
              }
              return parseFloat(getLoadCapacityNumSum/LoadCapacityDivisor).toFixed(2);

          }

      },
      getLoadStrengthNumSum: {
          get :function(){
              let getLoadStrengthNumSum = 0;
              let LoadStrengthDivisor = 0
              for (let item in this.resData.loadStrength){
                  if(this.resData.loadStrength[item] && this.resData.loadStrength[item] != 0){
                      getLoadStrengthNumSum += Number(this.resData.loadStrength[item])
                      LoadStrengthDivisor++
                  }
              }
              return parseFloat(getLoadStrengthNumSum/LoadStrengthDivisor).toFixed(2);

          }

      }
    },
    methods: {
      print() {
        this.picInfo = this.personCharts.getDataURL();
      },
      getExcel() {
          orgBaseInfoCurrent().then(res=>{
            this.orgName = res.data[0].name
          this.personCharts = echarts.init(document.getElementById('excelCharts'));
          let planChartsOption = {
              title: {
                  text: ''
              },
              tooltip: {},
              grid:{
                  height:90,
                  top:40,
                  left:100,
                  width:1000

              },
              legend: {
                  orient: 'vertical',
                  x: 1350,
                  y: 'top',
                  data:['负荷量','负荷强度']
              },
              xAxis: {
                  data: Object.values(this.resData.week),
                  // axisLabel: {
                  //     interval:0,
                  //     rotate:40,
                  //     textStyle: {
                  //         color: "#a9a9a9", //更改坐标轴文字颜色
                  //         fontSize: 10 //更改坐标轴文字大小
                  //     },
                  // },
              },
              yAxis: {},
              series: [{
                  name: '负荷量',
                  type: 'line',
                  data: Object.values(this.resData.loadCapacity),
                  "connectNulls": true
              },{
                  name: '负荷强度',
                  type: 'line',
                  symbol:'diamond',
                  symbolSize:8,
                  data: Object.values(this.resData.loadStrength),
                  "connectNulls": true
              }],
              color:['#0180CD','#FF4D4D']
          };
          // 使用刚指定的配置项和数据显示图表。
          this.personCharts.setOption(planChartsOption);
        })
      }
    }
  }
</script>

<style scoped>

</style>
